<style type="text/css">
	div.guide{
		top:0;
	}
	div.center-logo{
		margin:10px auto 10px;
		width:219px;
		height:32px;
		background:url(/luci-static/images/phicomm.png?_=20170809165512) no-repeat;
	}
	p.web-site{
		margin:30px auto 60px;
		font-size:17px;
		color:#909396;
	}
	h1.router-name{
		margin:90px auto;
		color:#909396;
	}
	span.router{
		font-size:22px;
	}
	span.router-model{
		margin-left:10px;
		font-size:16px;
	}
	div.bg-map{
		position:absolute;
		left:0;
		right:0;
		top:50%;
		margin:-130px auto 0;
		width:771px;
		height:371px;
		background:url(/luci-static/images/bg_map.jpg?_=20170809165512) no-repeat;
		z-index:-10;
	}
	div.login-con{
		height:130px;
	}
	input.login-btn{
		color:#FFF;
		font-size:16px;
		cursor:pointer;
		border:0;
		height:40px;
		width:236px;
		line-height:34px;
		vertical-align:middle;
		background:url(/luci-static/images/button.png?_=20170809165512) no-repeat;
	}
	span.desc-lbl a{
		color:#4F5356;
		text-decoration:none;
	}
	div.footer{
		width:100%;
		height:210px;
		position:absolute;
		bottom:0;
		font-size:14px;
		color:#909396;
		background-color:#3F4044;
		text-align:center;
	}
	div.separate-line{
		height:2px;
		background:url(/luci-static/images/color_line.png?_=20170809165512) repeat;
	}
	div.download-app{
		color:#FFF;
		font-size:12px;
		position:absolute;
		top:30px;
		right:0;
	}
	div.pic-code{
		margin:0 auto 10px;
		width:87px;
		height:87px;
		background:url(/luci-static/images/pic_code.png?_=20170809165512) no-repeat;
	}
	div.hotline{
		display:inline-block;
		width:240px;
		text-align:left;
	}
	i.phone-img{
		font-size:28px;
		color:#FF8000;
	}
	span.phone-tip{
		font-size:14px;
		line-height:28px;
		vertical-align:top;
		color:#767D82;
		margin-top:3px;
		margin-left:5px;
	}
	p.phone-num{
		font-size:24px;
		color:#FF8000;
		margin-top:10px;
	}
	p.copyright{
		margin-top:30px;
	}
	div.route-info{
		display:inline-block;
		text-align:left;
	}
	div.info{
		position:relative;
		padding-top:50px;
		margin:auto;
		width:90%;
	}
	div.info a{
		color:#909396;
		margin-right:20px;
	}
	ul.set-con {
		margin: 40px 50px 40px;
	}
	/*1080p*/
	@media screen and (min-device-width:1920px){
		div.footer{
			font-size:18px;
			height:280px;
		}
		div.guide {
			bottom: 280px;
		}
		div.center-logo {
			width: 289px;
			height: 40px;
			background-size: 289px 40px;
		}
		i.phone-img{
			font-size:30px;
		}
		span.phone-tip{
			font-size:18px;
			line-height:30px;
		}
		p.web-site {
			font-size: 21px;
			margin: 40px auto 60px;
		}
		input.login-btn {
			font-size: 20px;
			height: 46px;
			width: 372px;
			background-size:372px 48px;
		}
		span.desc-lbl {
			font-size: 18px;
		}
		h1.router-name {
			margin: 120px auto 115px;
		}
		ul.set-con {
			margin: 50px 50px 50px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	$("#Start").click(function(){
		stateman.go("setLgPwd");
	});

	$("i.icon-check").click(function(){
		var val = parseInt($(this).attr("data-value"));
		if (0 == val){
			$(this).attr("data-value", "1").css("color", "#1DD34D").removeClass("icon_select_off").addClass("icon_select_on");
		}else{
			$(this).attr("data-value", "0").css("color", "#4F5356").removeClass("icon_select_on").addClass("icon_select_off");
		}

		var btn = $(this).attr("data-toggle-btn");
		if (btn){
			var $btn = $("#"+btn);
			var bg = $btn.css("backgroundImage");

			if (1 == val){
				bg = bg.replace("button", "button_disable");
				$btn.attr("disabled", "disabled").css("backgroundImage", bg);
			}else{
				bg = bg.replace("button_disable", "button");
				$btn.removeAttr("disabled").css("backgroundImage", bg);
			}
		}
	}).each(function(){
		var val = $(this).attr("data-value") || 0;
		if (1 == val){
			$(this).attr("data-value", "1").css("color", "#1DD34D").removeClass("icon_select_off").addClass("icon_select_on");
		}else{
			$(this).attr("data-value", "0").css("color", "#4F5356").removeClass("icon_select_on").addClass("icon_select_off");
		}

		var btn = $(this).attr("data-toggle-btn");
		if (btn){
			var $btn = $("#"+btn);
			var bg = $btn.css("backgroundImage");

			if (0 == val){
				bg = bg.replace("button", "button_disable");
				$btn.attr("disabled", "disabled").css("backgroundImage", bg);
			}else{
				bg = bg.replace("button_disable", "button");
				$btn.removeAttr("disabled").css("backgroundImage", bg);
			}
		}
	});

	var contentScroll = new NiceScroll("Main");
	contentScroll.init();
})();
</script>
<%
	local para = {device = {info = {}}, welcome = {config = {}}}
	local result = tpl_get_data(para)
	local dev_mac = result[K_MODULE].device.info.mac
	local agreement = result[K_MODULE].welcome.config.agreement
-%>
<div id="Main" class="guide center-container">
	<div class="vertical-center">
		<div class="center-logo"></div>
		<p class="web-site">{%label.phicommWebSite%}</p>
		<h1 class="router-name">
			<span class="router">{%label.welcome%}</span>
		</h1>
		<div class="login-con">
			<ul class="set-con">
				<input id="Start" class="login-btn" type="button" value="{%btn.start%}" />
			</ul>
			<ul class="set-con">
				<i class="tip-l icon-check" data-value='<%=agreement%>' data-toggle-btn="Start"></i>
				<span class="desc-lbl">
					{%label.readAndagree%}<a href="javascript:showUserAgreement();" class="user-agreement">{%label.theUserAgreement%}</a>
				</span>
			</ul>
		</div>
	</div>
	<div class="bg-map"></div>
</div>
<div class="footer">
	<div class="separate-line"></div>
	<div class="info">
		<div class="hotline">
			<i class="icon icon_phone phone-img"></i><span class="phone-tip">{%label.hotline%}</span>
			<p class="phone-num">4007-567-567</p>
		</div>
		<div class="route-info">
			<a href="javascript:showUserAgreement();" class="user-agreement">{%label.userAgreement%}</a>
			<span>{%label.macAddr%}{%label.colon%}<span id="RouterMac"><%=dev_mac%></span></span>
			<p class="company copyright">{%label.phicommTechnologyCoLtd%}</p>
		</div>
		<div class="download-app">
			<div class="pic-code"></div>
			<p>{%label.scanDownloadApp%}</p>
		</div>
	</div>
</div>